<script setup lang="ts">
import { Api } from '@/assets/apis';
import type { HomeDataType } from '@/typings'
import { ref, onMounted } from 'vue'
import MaleView from '@/components/MaleView.vue'
import FemaleView from '@/components/FemaleView.vue'
import PublicationView from '@/components/PublicationView.vue'
import ClassifyView from '@/components/ClassifyView.vue';
import FreeView from '@/components/FreeView.vue'
import { useRoute, useRouter } from 'vue-router';
import { Toast } from 'vant';
import RankView from '@/components/RankView.vue';


const homeData = ref<Array<HomeDataType>>([])
const loading = ref(false)

onMounted(async () => {
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
    duration: 0,
  });
  let { data } = await Api.getHome()

  homeData.value = data.data.list
  // console.log(data.list);
  Toast.clear()
  loading.value = true
})

const active = ref(1)

const router = useRouter()
const route = useRoute()

const search = () => {
  router.push('/search')
}

</script>

<template>
  <div v-show="loading">
    <div class="header">
      <div class="logo">
        <img src="../../assets/images/icon_logo@2x.png" alt="">
      </div>
      <div class="right">
        <div class="search" @click="search()">
          <van-icon name="search" />
        </div>
        <div class="person" @click="router.push('/myinfo')">
          <van-icon name="contact" />
        </div>
      </div>
    </div>

    <van-tabs v-model="active">
      <van-tab title="男频">
        <MaleView :title="homeData" />
      </van-tab>
      <van-tab title="女频">
        <FemaleView />
      </van-tab>
      <van-tab title="出版">
        <PublicationView />
      </van-tab>
      <van-tab title="分类">
        <ClassifyView />
      </van-tab>
      <van-tab title="免费">
        <FreeView />
      </van-tab>
      <van-tab title="排行">
        <RankView />
      </van-tab>
    </van-tabs>
  </div>
</template>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 40rem;
  display: flex;
  justify-content: space-between;

  .logo {
    width: 110rem;
    height: 20rem;
    margin-left: 20rem;

    img {
      width: 100%;
      height: 100%;
      margin-top: 20rem;
      transform: translateY(-50%);
    }
  }
}

.right {
  display: flex;
  text-align: center;
  line-height: 40rem;

  .search {
    width: 30rem;
    height: 40rem;
    font-size: 26rem;
  }

  .person {
    width: 30rem;
    height: 30rem;
    font-size: 26rem;
    margin: 0 15rem 0 5rem;
  }
}
</style>